<template>
	<view>
		<jiangyan-calendar ref="jiangyanCalendar" :lastMonth='lastMonth' :nextMonth='nextMonth' :weekText="weekText" @selectedday="selectedday()"></jiangyan-calendar>
		<!-- 没有任何订单图片 -->
		<view id="nodata" v-if="noData == true">
			<image src="../../../static/wudingdan.png" mode="aspectFit"></image>
		</view>
		<view class="yhpj" v-else>
			<view class="yhpj-list">
				<view class="item" v-for="(item, index) in dplist" :key="index">
					<view class="item-right">
						<view class="item-right-top">
							<image class="item-left" :src="item.avatar" mode="aspectFill"></image>
							<text>{{item.nickname}} UID:{{item.uid}}</text>
							<text>{{item.addtime}}</text>
							<text :style="item.is_dp == 0?'color:red;':'color:green;'">{{item.is_dp == 0?'等待点评':'已点评'}}</text>
						</view>
						<view class="item-right-bottom">
							<text>课程名称:{{item.coursename}}</text>
							<text>{{item.detail}}</text>
						</view>
						<view class="item-right-files">
							<image :src="item.img" mode="aspectFit" @click="showimg(item.img)"></image>
							<video :src="item.video"></video>
						</view>
					</view>
					<view class="pingyu">
						<view v-if="item.is_dp==1">
							<text style="color: green;">老师评语：{{item.dianping}}</text>
							<text>点评时间：{{item.dptime}}</text>
						</view>
						<button type="primary" size="mini" @click="showplbox(item)">{{item.is_dp==1?'修改':'写'}}评语</button>
					</view>
				</view>

				<!-- 发布评论 -->
				<!-- 遮罩层 -->
				<view class="mask" v-if="commentFlag" @click="hideplbox" style="width: 100%;
				height: 100vh; background-color: rgba(9,9,9,.7); position: fixed; top: 0; left: 0;z-index: 9999;"></view>
				<view class="post-comments" v-if="commentFlag">
					<textarea class='uni-input' cursor-spacing="10" v-model="commentText"/>
					<view class="icon">
						<view class="fabu_btn">
							<button  type="default" style="width: 50%; font-size: 24upx;background-color: #007AFF;color: #fff;"
							@click="pinglun()">发布</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	    
</template>

<script>
	import jiangyanCalendar from "@/components/jiangyan-calendar/jiangyanCalendar.vue";
	import { postMyDianplist } from '@/request/dianping';
	import {checkUserinfo} from '@/request/checkUserinfo';
	export default {
	    components: {
	        jiangyanCalendar
	    },
	    data() {
	        return {
				lastMonth:'◀',
				nextMonth:'▶',
				//星期数组
				weekText: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				selectVal: '',
				noData: false,
				courseid:0,//课程id
				tid:0,
				type:0,//点评课程类型 0 线上课程 1 线下课程
				dplist:[],
				commentFlag:false,//控制评论框弹出
				commentText:'',
				item:{}
	        }
	    },
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		onLoad(e) {
			if(e.courseid){
				this.courseid = e.courseid
			}
			if(e.tid){
				this.tid = e.tid
			}
		},
		onShow() {
			checkUserinfo();
			this.postMyDianplist();
		},
	    methods: {
			showimg(e){
				console.log(e)
				// #ifdef H5
				window.open(e);
				// #endif
				// #ifndef H5
				uni.downloadFile({
				    url: e,
				    success: (res) => {
				        if (res.statusCode === 200) {
							uni.previewImage({
							  urls: [res.tempFilePath],
							  longPressActions: {
								  itemList: ['发送给朋友', '保存图片', '收藏'],
								  success: function(data) {
									  console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								  },
								  fail: function(err) {
									  console.log(err.errMsg);
								  }
							  }
							});
				        }else{
							uni.hideLoading();
							uni.showModal({
							    title: '下载报错原因:',
							    content: JSON.stringify(res),
							    success: (res)=> {
							        if (res.confirm) {
							        }
							    }
							});
						}
				    }
				});
				// #endif
			},
			//评论
			pinglun(){
				var content = this.commentText;
				if(content == ""){
					uni.showToast({
						title:'评论内容不能为空',
						icon:'none'
					})
					return false;
				}
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/teacher/dianping',
					data:{
						tid:this.tid,
						id:this.item.id,
						dianping:content
					},
					method:'POST', 
					success:(res) =>{
						if(res.data.code == 0){
							uni.showToast({
								title:'点评成功',
								icon:'none'
							})
							this.commentFlag = false;
							setTimeout(()=>{
								this.postMyDianplist()
							},500)
						}else{
							console.log(res.data);
						}
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			showplbox(item){
				this.item = item
				this.commentText = item.dianping!=''?item.dianping:'';
				this.commentFlag = true
			},
			hideplbox(){
				this.commentFlag = false
			},
			//组件监听事件
			selectedday(e) {
			    console.log('当前选中日期',e);
				if(e != this.selectVal){
					this.selectVal = e;
				}
				this.postMyDianplist();
			},
			qiehuan(){
			    this.$refs.jiangyanCalendar.switchFg();
			},
			// 获取订单数据
			postMyDianplist () {
				let userinfo=uni.getStorageSync('userinfo')
				uni.showLoading({
					title:'正在为您查询...'
				})
				postMyDianplist({tid: this.tid,day:this.selectVal,courseid:this.courseid,type:this.type}).then(res => {
					console.log(res.data)
					setTimeout(()=>{
						uni.hideLoading();
					},500)
					if(res.data.data == '') {
						setTimeout(()=>{
							uni.showModal({
							    title: '温馨提示',
							    content: res.data.msg,
								showCancel:false,
							    success: function (res) {
							        if (res.confirm) {
							            console.log('用户点击确定');
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
						},500)
						this.noData = true
					} else {
						this.noData = false
						this.dplist = res.data.data
					}
				})
			},
	    }
	}
</script>

<style lang="less" scoped>
	#nodata {
		width: 100%;
		height: 500rpx;
		background-color: #fff;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.post-comments{
		box-sizing: border-box;
		width: 100%;
		height: 300upx;
		background-color: #fff;
		border-top: 2upx solid #ccc;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20upx;
		z-index: 999999;
		textarea{
			width: 90%;
			border: 2upx solid #ccc;
			height: 160upx;
			padding: 10upx;
			text-align: left;
		}
		.icon{
			margin-top: 20upx;
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: flex-end;
			.left{
				width:30%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				.item{
					width: 50upx;
					height: 50upx;
					margin-right: 20upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				
			}
			.fabu_btn{
				width: 50%;
				height: 100%;
			}
			
			
		}
	}
	.yhpj {
		text-align: center;
		margin-bottom: 140upx;
		background-color: #fff;
		padding: 20rpx 0;
		&-list {
			.pingyu{
				width: 100%;
				display: block;
				padding: 10rpx;
				view{
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					text{
						padding: 10rpx;
						font-size: 26rpx;
					}
				}
				
				button{
					margin-top: 10rpx;
				}
			}
			.item {
				display: flex;
				flex-direction: column;
				padding:15upx;
				justify-content: start;
				align-items: center;
				border-top: 1rpx solid #eee;
				border-bottom: 1rpx solid #eee;
				&-left {
					width: 50upx;
					height: 50upx;
					border-radius: 35upx;
					margin-right: 10upx;
				}
				&-right {
					width: 100%;
					display: flex;
					flex-direction: column;
					&-top {
						font-weight: 700;
						display: flex;
						align-items: center;
						justify-content: space-around;
						text:nth-child(1) {
							font-size: 28upx;
							color: #333;
						}
						text:nth-child(2) {
							font-size: 26upx;
							color: #999;
						}
					}
					&-bottom {
						max-width: 500upx;
						padding: 15upx 0;
						background-color: #fff;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: flex-start;
						text:first-child{
							font-weight: 700;
						}
						text {
							font-size: 28upx;
							font-weight: 400;
							color: #333;
							padding: 10rpx;
						}
					}
					&-files{
						display: flex;
						align-items: center;
						justify-content: space-around;
						image{
							width: 200upx;
							height: 300upx;
						}
						video{
							width: 300upx;
							height: 200upx;
						}
					}
				}
			}
		}
	}
</style>
